<template>

    <div class="mode-box">
        <div class="search" v-show="isShow">
            <div class="search-inner">
                <h4>车辆类型</h4>
                <el-input v-model="searchC.carName" placeholder="请输入车辆类型" clearable />
            </div>
            <div class="search-inner">
                <h4>车系</h4>
                <el-input v-model="searchC.carSeries" placeholder="请输入车系" clearable />
            </div>
            <div class="search-inner">
                <h4>建议价格</h4>
                <el-input v-model="searchC.price" placeholder="请输入建议价格" clearable />
            </div>
            <div>
                <el-button type="primary" :icon="Search" @click="searchCar">搜索</el-button>
                <el-button :icon="Refresh">重置</el-button>
            </div>
        </div>
        <div class="btns">
            <div>
                <el-button type="primary" plain :icon="Plus" @click="dialogAddType = true">新增</el-button>
                <el-button type="success" plain :icon="EditPen" :disabled="multipleSelection.length == 1 ? false : true"
                    @click="edittype(carid)">修改</el-button>
                <el-button type="danger" plain :icon="Delete" :disabled="multipleSelection.length != 0 ? false : true"
                    @click="delcar(carids)">删除</el-button>
                <el-button type="warning" plain :icon="Download" @click="exportCar
                ">导出</el-button>
            </div>

            <div>
                <el-tooltip :content="isShow ? '隐藏搜索' : '显示搜索'" placement="top">
                    <el-button @click="isShow = !isShow" :icon="Search" circle />
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                    <el-button @click="searchCar" :icon="Refresh" circle />
                </el-tooltip>
            </div>
        </div>
        <div class="eltable">
            <el-table ref="multipleTableRef" :data="typeList" table-layout="auto" width="100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="车型id" prop="id">
                </el-table-column>
                <el-table-column property="name" label="车辆类型" prop="carName" />
                <el-table-column property="address" label="车系" prop="carSeries" />
                <el-table-column label="图片"></el-table-column>
                <el-table-column label="建议价格" prop="price"></el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <a class="editpen" @click="edittype(row.id)"><el-icon>
                                <EditPen />
                            </el-icon>修改</a>
                        <a @click="delcar(row.id)">
                            <el-icon>
                                <Delete />
                            </el-icon>删除
                        </a>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <ElConfigProvider :locale="zhCn">
                <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50]" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total=total @size-change="queryTypeList"
                    @current-change="queryTypeList" />
            </ElConfigProvider>
        </div>
        <!-- 新增 -->
        <el-dialog v-model="dialogAddType" title="添加【请填写功能名称】" style="margin-top: 15vh;width: 550px;">
            <el-form :model="form">
                <el-form-item label="车辆类型" :label-width="formLabelWidth">
                    <el-input v-model="form.carName" autocomplete="off" placeholder="请输入车辆类型" />
                </el-form-item>
                <el-form-item label="车系" :label-width="formLabelWidth">
                    <el-input v-model="form.carSeries" autocomplete="off" placeholder="请输入车系" />
                </el-form-item>
                <el-form-item label="图片" :label-width="formLabelWidth">
                    <!-- 上传图片 -->
                    <el-upload action="#" list-type="picture-card" :auto-upload="false">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <el-icon><zoom-in /></el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleDownload(file)">
                                        <el-icon>
                                            <Download />
                                        </el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </el-form-item>
                <el-form-item class="el-upload__tip" :label-width="formLabelWidth"> 请上传 大小不超过 <b data-v-12d33494=""
                        style="color: rgb(245, 108, 108);">5MB</b> 格式为 <b data-v-12d33494=""
                        style="color: rgb(245, 108, 108);">png/jpg/jpeg</b> 的文件 </el-form-item>
                <el-form-item label="建议价格" :label-width="formLabelWidth">
                    <el-input v-model="form.price" placeholder="请输入建议价格" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="addType">确定</el-button>
                    <el-button @click="dialogAddType = false">
                        取消
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog v-model="dialogEditType" title="修改【请填写功能名称】" style="margin-top: 15vh;width: 500px;">
            <el-form :model="edt">
                <el-form-item label="车辆类型" :label-width="formLabelWidth">
                    <el-input v-model="edt.carName" autocomplete="off" placeholder="请输入车辆类型" />
                </el-form-item>
                <el-form-item label="车系" :label-width="formLabelWidth">
                    <el-input v-model="edt.carSeries" autocomplete="off" placeholder="请输入车系" />
                </el-form-item>
                <el-form-item label="图片" :label-width="formLabelWidth">
                    <!-- 上传图片 -->
                    <el-upload action="#" list-type="picture-card" :auto-upload="false">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <el-icon><zoom-in /></el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleDownload(file)">
                                        <el-icon>
                                            <Download />
                                        </el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </el-form-item>
                <el-form-item class="el-upload__tip" :label-width="formLabelWidth"> 请上传 大小不超过 <b data-v-12d33494=""
                        style="color: rgb(245, 108, 108);">5MB</b> 格式为 <b data-v-12d33494=""
                        style="color: rgb(245, 108, 108);">png/jpg/jpeg</b> 的文件 </el-form-item>
                <el-form-item label="建议价格" :label-width="formLabelWidth">
                    <el-input v-model="edt.price" placeholder="请输入建议价格" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="editType">确定</el-button>
                    <el-button @click="dialogEditType = false">
                        取消
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>


</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, ElTable, ElTableColumn, UploadFile } from 'element-plus'
import { Plus, EditPen, Delete, Download, Search, Refresh } from '@element-plus/icons-vue'
import { getTypeName, getAddType, getCarId, getCarType, delCarType, searchCarType, export1 } from './api/index'
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { saveAs } from 'file-saver'

const isShow = ref(true)
// 分页器
const total = ref(0)
const background = ref(true)
const disabled = ref(false)


interface User {
    date: string
    name: string
    address: string
    id: number
}
const carid = ref(0)
const carids = ref<any>([])
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
    carid.value = val[0].id
    carids.value = val.map(item => item.id)
    console.log(carid, val[0].id, "9999999999");
}

// 页面数据
const typeList = ref<IResourceTypeName[]>([]);
const queryParams = reactive<IUserListParams>({
    pageNum: 1,
    pageSize: 10,
});
// 请求数据
const queryTypeList = () => {
    getTypeName(queryParams).then((res) => {
        if (res.code === 200) {
            typeList.value = res.rows
            total.value = res.total
            console.log(res.rows, '66666666')
        }
    });
};
queryTypeList()

//  新增
const form = reactive<IAddType>({
    carName: '',
    carSeries: '',
    price: 0
})
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleRemove = (file: UploadFile) => {
    console.log(file)
}
const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
}
const handleDownload = (file: UploadFile) => {
    console.log(file)
}
const addType = () => {
    getAddType(form)
    dialogAddType.value = false
}
const dialogAddType = ref(false)
const formLabelWidth = '100px'

// 修改
const edt = reactive<IAddType>({
    carName: '',
    carSeries: '',
    price: 0,
    id: 0,
    image: '',
})
const dialogEditType = ref(false)
const edittype = (id: number) => {
    dialogEditType.value = true
    getCarId(id).then((res) => {
        if (res.code === 200) {
            let { carName, carSeries, price, id, image } = res.data
            edt.carName = carName
            edt.carSeries = carSeries
            edt.price = price
            edt.id = id
            edt.image = image
        }
    })
}
// 确定修改
const editType = () => {
    getCarType(edt).then((res) => {
        if (res.code === 200) {
            typeList.value = res.rows
            total.value = res.total
        }
    })
    getTypeName(queryParams)
    dialogEditType.value = false
}
// 删除
const delcar = (id: any) => {
    ElMessageBox.confirm(
        `是否确认删除【请填写功能名称】编号为"${id}"的数据项？`,
        '系统提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ElMessage({
            type: 'success',
            message: '删除成功',
        });
        delCarType(id)
        queryTypeList()
    }).catch(() => {
    })
}
// 搜索
const searchC = reactive<IUserListParams>({
    pageNum: 1,
    pageSize: 10,
})

const searchCar = () => {
    searchCarType(searchC).then((res) => {
        if (res.code === 200) {
            typeList.value = res.rows
        }
    })
}

// 导出
const exportCar = () => {
    export1(
        {
            pageNum: 1,
            pageSize: 10,
        },
        {
            //导出文件的请求需要额外配置
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            responseType: "blob",
        }
    ).then((res) => {
        if (!res) return;
        console.log(res, 'res');

        saveAs(new Blob([res as any]),
            `客户档案_${new Date().getTime()}.xlsx`
        );
    })
}

</script>

<style scoped lang="less">
.mode-box {
    margin-top: 35px;

    .search {
        display: flex;
        line-height: 30px;
        margin-bottom: 20px;

        .search-inner {
            display: flex;
            padding-right: 10px;

            h4 {
                width: 110px;
            }
        }
    }

    .btns {
        display: flex;
        justify-content: space-between;
        text-align: left;

        :deep(.el-form-item) {
            .el-upload__tip {
                font-size: 12px;
                margin-left: 20px;
            }
        }
    }

    .eltable {
        :deep(.el-table__cell) {
            text-align: center;
        }

        .editpen {
            margin-right: 20px;
        }
    }

    .pagination {
        display: flex;
        flex-direction: row-reverse;
        padding: 10px 20px;
        margin-top: 15px;
    }
}
</style>